<template>
  <transition name="fadein">
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'fadeIn'
}
</script>

<style lang="stylus" scoped>
  .fadein-enter-active
    animation: fadein .3s;
  .fadein-leave-active
    animation: fadein .3s reverse;
  @keyframes fadein {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }
</style>
